<template>
  <div
    ref="popup"
    id="popup"
    class="popover ng-scope bottom am-flip-x"
    :style="visablestyle"
    style="width:480px;left: -240px;"
  >
    <div class="arrow"></div>
    <h3
      style="background-color: #57c52c;color: #fff; "
      class="popover-title ng-binding"
      ng-bind-html="title"
      ng-show="title"
    >
      {{popupData.Title}}
      <button id="popup-closer" type="button" class="close" @click="popupClose">×</button>
    </h3>
    <div class="popover-content ng-binding">
      <div v-if="popupData.contentType=='qy_jcd'">
        <table class="table">
          <tbody>
            <tr>
              <td>企业名称</td>
              <td colspan="3">{{popupData.QyName}}</td>
            </tr>
            <tr>
              <td>年均流量</td>
              <td>{{popupData.YjLl}}</td>
              <td>年均烟气温度</td>
              <td>{{popupData.YqWd}}</td>
            </tr>
            <tr>
              <td>排放口高度</td>
              <td>{{popupData.PfkGd}}</td>
              <td>烟囱高度</td>
              <td>{{popupData.YcGd}}</td>
            </tr>
            <tr>
              <td>采样口横截面积</td>
              <td>{{popupData.CykMj}}</td>
              <td>烟囱场所</td>
              <td>{{popupData.YcCs}}</td>
            </tr>
            <tr>
              <td>排烟口直径</td>
              <td>{{popupData.PykZj}}</td>
              <td>排放标准</td>
              <td>{{popupData.PfBz}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else-if="popupData.contentType=='mine'">
        <table class="table">
          <tbody>
            <tr>
              <td>申请单位</td>
              <td colspan="3">{{popupData.Name}}</td>
            </tr>
            <tr>
              <td>许可证号</td>
              <td colspan="3">{{popupData.lcode}}</td>
            </tr>
            <tr>
              <td>勘查单位</td>
              <td colspan="3">{{popupData.surveyunit}}</td>
            </tr>
            <tr>
              <td>申请序号</td>
              <td colspan="3">{{popupData.applyid}}</td>
            </tr>

            <tr>
              <td>有效期起</td>
              <td>{{popupData.datebegin}}</td>
              <td>有效期止</td>
              <td>{{popupData.dateend}}</td>
            </tr>
            <tr>
              <td>勘查矿种</td>
              <td>{{popupData.minttype}}</td>
              <td>总面积</td>
              <td>{{popupData.karea}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else-if="popupData.contentType=='CoalGanguehill'">
        <table class="table">
          <tbody>
            <tr>
              <td>分层名称</td>
              <td colspan="3">{{popupData.fcm}}</td>
            </tr>
            <tr>
              <td colspan="2">类型及名称</td>
              <td colspan="2">{{popupData.lxjmc}}</td>
            </tr>
            <tr>
              <td>自燃类型</td>
              <td>{{popupData.zrlx}}</td>
              <td>自燃点数量</td>
              <td>{{popupData.zrdsl}}</td>
            </tr>

            <tr>
              <td>自理数量</td>
              <td>{{popupData.zlsl}}</td>
              <td>验收情况</td>
              <td>{{popupData.ysqk}}</td>
            </tr>
            <tr>
              <td colspan="2">SO2年排放量</td>
              <td colspan="2">{{popupData.so2pfl}}</td>
            </tr>
            <tr>
              <td colspan="2">NOX年排放量</td>
              <td colspan="2">{{popupData.noxpfl}}</td>
            </tr>
            <tr>
              <td>颗粒物年排放量</td>
              <td>{{popupData.klwpfl}}</td>

              <td>面积</td>
              <td>{{popupData.mj}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else-if="popupData.contentType=='landuse'">
        <table class="table">
          <tbody>
            <tr>
              <td>地类名称</td>
              <td colspan="3">{{popupData.DLMC}}</td>
            </tr>
            <tr>
              <td colspan="2">权属性质</td>
              <td colspan="2">{{popupData.QSXZ}}</td>
            </tr>
            <tr>
              <td>权属单位名称</td>
              <td>{{popupData.QSDWMC}}</td>
              <td>图斑面积</td>
              <td>{{popupData.TBMJ}}</td>
            </tr>

            <tr>
              <td>耕地类型</td>
              <td>{{popupData.GDLX}}</td>
              <td>数据年份</td>
              <td>{{popupData.SJNF}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div v-else>未定义</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PopUp',
  data() {
    return {
      visablestyle: { display: 'none', top: '0px' },
      popupData: {}
    };
  },
  props: {
    popupOption: {
      type: Object,
      default: () => {}
    }
  },
  mounted() {
    var height = this.$refs.popup.offsetHeight;
    this.visablestyle.top = '-' + height + 'px';
  },
  watch: {
    popupOption() {
      this.popupData = this.popupOption;
      //   var o = document.getElementById('popup');
      //   var h = o.clientHeight||o.offsetHeight;

      this.visablestyle.display = this.popupData.display;
      if (this.popupData.contentType == 'wuhaiapichart') {
        this.initAqiCharts();
      }
    }
  },
  methods: {
    popupClose() {
      this.visablestyle.display = 'none';
    },
    initAqiCharts() {
      let optionr1 = {
        title: {
          text: '乌海实时 AQI 数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          data: this.popupData.xData
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        toolbox: {
          left: 'center',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: [
          {
            startValue: this.popupData.xData[0]
          },
          {
            type: 'inside'
          }
        ],
        visualMap: {
          top: 10,
          right: 10,
          pieces: [
            {
              gt: 0,
              lte: 50,
              color: '#096'
            },
            {
              gt: 50,
              lte: 100,
              color: '#ffde33'
            },
            {
              gt: 100,
              lte: 150,
              color: '#ff9933'
            },
            {
              gt: 150,
              lte: 200,
              color: '#cc0033'
            },
            {
              gt: 200,
              lte: 300,
              color: '#660099'
            },
            {
              gt: 300,
              color: '#7e0023'
            }
          ],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: '乌海实时 AQI 数据',
          type: 'line',
          data: this.popupData.seriesData,
          markLine: {
            silent: true,
            data: [
              {
                yAxis: 50
              },
              {
                yAxis: 100
              },
              {
                yAxis: 150
              },
              {
                yAxis: 200
              },
              {
                yAxis: 300
              }
            ]
          }
        }
      };
      console.log('ddddd');
      let r1 = this.$echarts.init(document.getElementById('aqichart1'));
      r1.setOption(optionr1, true);
    }
  }
};
</script>

